<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table class="table-child">
        <thead>
            <tr>
                <th>属性值</th>
                <th>效果</th>
                <th>说明</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>text</td>
                <td>普通文本框</td>
                <td>默认值，如果type值非法，也做该值解析</td>
            </tr>
            <tr>
                <td>password</td>
                <td>密码框</td>
                <td>输入的内容会使用*进行隐藏</td>
            </tr>
            <tr>
                <td>radio</td>
                <td>单选框</td>
                <td>一组单选框根据name值进行互斥</td>
            </tr>
            <tr>
                <td>checkbox</td>
                <td>多选框</td>
                <td></td>
            </tr>
            <tr>
                <td>submit</td>
                <td>提交按钮</td>
                <td>点击后用于将当前表单提交</td>
            </tr>
            <tr>
                <td>reset</td>
                <td>重置按钮</td>
                <td>点击后用于将当前表单值进行重置</td>
            </tr>
            <tr>
                <td>button</td>
                <td>普通按钮</td>
                <td>需要注意的是button标签，默认为提交按钮</td>
            </tr>
            <tr>
                <td>image</td>
                <td>图形提交按钮</td>
                <td>效果等同提交按钮，使用src设置按钮的图片地址</td>
            </tr>
            <tr>
                <td>file</td>
                <td>文件提交组件</td>
                <td>如果要上传文件，注意更改表单的enctype和method属性</td>
            </tr>
            <tr>
                <td>hidden</td>
                <td>隐藏域</td>
                <td>组件虽然不显示，但是能够提交值</td>
            </tr>
        </tbody>
    </table>
    <h2>h5增加</h2>
    <table class="table-child">
        <thead>
            <tr>
                <th>属性值</th>
                <th>效果</th>
                <th>说明</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>date</td>
                <td>日期</td>
                <td>（重点）提供一个日期选择控件，进行日期选择</td>
            </tr>
            <tr>
                <td>datetime</td>
                <td>时间</td>
                <td>提供日期和事件选择控件</td>
            </tr>
            <tr>
                <td>date-local</td>
                <td>时间</td>
                <td>提供日期和事件选择控件</td>
            </tr>
            <tr>
                <td>month</td>
                <td>月份</td>
                <td>提供月份选择控件</td>
            </tr>
            <tr>
                <td>time</td>
                <td>时、分、秒</td>
                <td>提供时、分、秒选择控件</td>
            </tr>
            <tr>
                <td>email</td>
                <td>邮件</td>
                <td>（重点）呈现为普通文本框，但必须填写邮箱地址格式</td>
            </tr>
            <tr>
                <td>tel</td>
                <td>电话</td>
                <td>（重点）呈现为普通文本框，注意：不会校验用户输入内容</td>
            </tr>
            <tr>
                <td>url</td>
                <td>URL地址</td>
                <td>呈现为普通文本框，要求用户填写URL地址</td>
            </tr>
            <tr>
                <td>color</td>
                <td>拾色器</td>
                <td>提供颜色选择控件</td>
            </tr>
            <tr>
                <td>number</td>
                <td>数值</td>
                <td>（重点）要求用户填写数值</td>
            </tr>
            <tr>
                <td>range</td>
                <td>滑块控件</td>
                <td>提供一个滑块控件，用于滑动选择数值</td>
            </tr>
            <tr>
                <td>search</td>
                <td>搜索框</td>
                <td>（重点）呈现为普通文本框，用于定义搜索框</td>
            </tr>
        </tbody>
    </table>
    <table class="table-child">
        <thead>
            <tr>
                <th>属性名</th>
                <th>属性值格式</th>
                <th>描述</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>max</td>
                <td>number</td>
                <td>允许输入的最大值</td>
            </tr>
            <tr>
                <td>min</td>
                <td>number</td>
                <td>允许输入的最小值</td>
            </tr>
            <tr>
                <td>step</td>
                <td>number</td>
                <td>规定合法数字间隔（如果 step="3"，则合法数字是 -3,0,3,6，以此类推）</td>
            </tr>
            <tr>
                <td>checkbox</td>
                <td>多选框</td>
                <td></td>
            </tr>
            <tr>
                <td>submit</td>
                <td>提交按钮</td>
                <td>点击后用于将当前表单提交</td>
            </tr>
            <tr>
                <td>reset</td>
                <td>重置按钮</td>
                <td>点击后用于将当前表单值进行重置</td>
            </tr>
            <tr>
                <td>button</td>
                <td>普通按钮</td>
                <td>需要注意的是button标签，默认为提交按钮</td>
            </tr>
            <tr>
                <td>image</td>
                <td>图形提交按钮</td>
                <td>效果等同提交按钮，使用src设置按钮的图片地址</td>
            </tr>
            <tr>
                <td>file</td>
                <td>文件提交组件</td>
                <td>如果要上传文件，注意更改表单的enctype和method属性</td>
            </tr>
            <tr>
                <td>hidden</td>
                <td>隐藏域</td>
                <td>组件虽然不显示，但是能够提交值</td>
            </tr>
        </tbody>
    </table>
    <div>
        <form>
        <input type="number" name="" id="number" max="10" min="0">
        <input type="submit" value="提交">
    </form>
    </div>
</body>
</html>